<template>
	<view class="page">
		<view class="page-bg"></view>
		<view class="container">
			<z-paging ref="paging" v-model="list"   :default-page-size="params.pageSize" @query="getList">
				<template #top>
					<uni-nav-bar ref="navBar" statusBar title="订单管理" :border="false" backgroundColor="transparent"
						@clickLeft="goBack">
						<template v-slot:left>
							<image src="@/static/svg/publicSvg/icon-back.svg" />
						</template>
					</uni-nav-bar>
					<!-- <view class="menu-box flex item-center justify-center">
						<view v-for="item in menu" class="menu-item" :key="item.id" :class="{'active':item.id == params.orderType}" @click="changeMenu(item)">
							<view>{{item.name}}</view>
							<image src="@/center/static/svg/order/sel-line.svg" mode="" class="sel-line" v-if="item.id == params.orderType"></image>
						</view>
					</view> -->
					<view class="search-box flex item-center justify-between">
						<view class="flex item-center search-inp-box">
							<image src="@/static/svg/publicSvg/icon-search.svg" mode="widthFix" class="icon-search"></image>
							<input 
								type="text" 
								placeholder="搜商品名称/订单编号/下单人手机号" 
								placeholder-style="color:rgba(153, 153, 153, 1);" 
								class="search-inp"
								v-model='selectKey'
							>
						</view>
						
						<view class="search-btn" @click="searchText">搜索</view>
					</view>
				</template>
				<view class="detail-box" v-for="order in list" :key="order.id" @click="linkDec(order)">
					<view class="detail-top flex item-center justify-between">
						<view class="goods-name ">
							<view>订单编号：{{order.subOrderNo}}</view>
							<view class="goods-price" style="margin-top: 6px;">下单时间：{{order.orderTime}}</view>
						</view>
						<view class="goods-price">
							{{getStatus(order.subOrderState)}}
						</view>
					</view>
					<view class="flex">
						<view class="img-box">
							<view v-if="order.orderType === 5" class="point-tip fs-8">积分订单</view>
							<image :src="order.goodsImgs" mode="" class="goods-img"></image>
							<view class="pft-box" v-if="order.verifyType">
								<image src="@/center/static/svg/goods/pft-ticket.svg" mode="" class="pft-ticket"></image>
								<text class="pft-text">票付通</text>
							</view>
						</view>
						<!-- <image :src="order.goodsImgs" mode="" class="goods-img"></image> -->
						<view class="goods-dec flex-col justify-between">
							<view class="goods-name">{{order.goodsName}}</view>
							<view class="goods-price">核销时间：{{order.verifyTime}}</view>
						</view>
					</view>
					<view class="amt-box flex item-center justify-between">
						<view>
							<view class="order-amt">订单：<text class="amt-num">¥{{order.merchantAmt}}</text></view>
							<view class="order-amt">补贴：<text class="amt-num">¥{{order.totalSubsidyAmt}}</text></view>
						</view>
						<view class="total-amt">
							总计：<text class="amt-num">¥ <text class="goods-num">{{order.goodsPrice}}</text></text>
						</view>
					</view>
					<view class="goods-msg flex justify-between item-center">
						<view class="fs-12 text-color-hint">下单人：{{ order.nickname }}/{{ order.userMobile }}</view>
						<view class="order-dec-btn">订单详情</view>
					</view>
				</view>
				<template #bottom>
					<view v-if="list && list.length" :style="`padding-bottom: ${safeAreaBottom}px;`">
						<button plain class="radius-8 mx-20 mb-16 fs-16" style="background-color: white;" type="warn" @click="showExport">订单导出</button>
					</view>
					<export-popup ref="exportPopupRef" />
				</template>
			</z-paging>
		
			<!-- <scroll-view scroll-y="true" :style="{'height':h}" @scrolltolower='scrolltolower' refresher-enabled='true'
				:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherrefresh="onRefresh"> -->
				
			<!-- </scroll-view>	 -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		computed
	} from 'vue'
	import {
		mathHeight,
		getOrderStatus
	} from '@/utils/index.js'
	import { getOrderPageList } from '@/api/order.js';
	import ExportPopup from './components/ExportPopup.vue'
	const menu = ref([
		{
			name:'团购订单',
			id:1
		},
		{
			name:'报名订单',
			id:2
		}
	])
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
	})
	const exportPopupRef = ref(null)
	const showExport = () => {
		exportPopupRef.value && exportPopupRef.value.showDialog(true)
	}
	// const menuId = ref(1)
	const goBack = () => {
		 if (getCurrentPages().length === 1) {
			uni.reLaunch({
			  url: "/homePages/pages/home/home"
			});
			return;
		  }
		uni.navigateBack()
	}
	const h = mathHeight(120)
	let params = ref({
		selectKey: '',
		pageNum: 1,
		pageSize: 15,
		orderType:1
	})
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	let refreshFlag = ref(false)
	const getStatus = (status) => {
		return getOrderStatus(status)
	}
	const selectKey = ref('')
	
	// 获取列表
	const paging = ref()
	const getList = async (num) => {
		// console.log(params.value,num)
		triggered.value = true
		params.value.pageNum = num
		uni.showLoading()
		let result = await getOrderPageList({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
			// list.value = params.pageNum == 1 ? result.list : (list.value).concat(result.list)
			// total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
		refreshFlag.value = false
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.pageNum + 1
		getList()
	}
	const onRestore = () => {
		// setTimeout(() =>{
		triggered.value = false; // 需要重置
		// },2000)
		// console.log("onRestore");
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	const changeMenu = (item) => {
		params.value.orderType = item.id
		reFresh()
	}
	const searchText = () => {
		params.value.selectKey = selectKey.value
		reFresh()
	}
	const linkDec = (item) => {
		uni.navigateTo({
			url:`/center/pages/order/orderDetail?id=${item.id}`,
			events: {
				reFreshPage: (data) => {
					reFresh()
				}
			},
		})
	}
	onMounted(() => {
		// getList()
	})
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		width: 100vw;
	}

	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
		background-size: 396px 396px;
		background-repeat: no-repeat;
		filter: blur(50px);
	}
	.container {
		position: relative;
		z-index: 1;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
	}
	.menu-box{
		width: 300px;
		margin: 20px auto 10px auto;
		.menu-item{
			width: 50%;
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			height: 40px;
			position: relative;
			color:#333333;
			// background:#333333;
			// background-clip:text;
			// -webkit-background-clip:text;
			// -webkit-text-fill-color:transparent;
			&.active{
				color: #FF2043;
				// background:#FF2043;
				// background-clip:text;
				// -webkit-background-clip:text;
				// -webkit-text-fill-color:transparent;
			}
			.sel-line{
				position: absolute;
				width: 15px;
				height: 3px;
				bottom: 10px;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	.search-box{
		margin: 10px 20px 10px 20px;
		// box-sizing: border-box;
		// width: calc(100% - 40px);
		padding: 10px 14px;
		background-color: #ffffff;
		border-radius: 8px;
		.icon-search{
			width: 20px;
			height: 20px;

		}
		.search-inp{
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			letter-spacing: 0px;
			width: calc(100% - 50px);
			margin-left: 4px;
		}
		.search-btn{
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			letter-spacing: 0px;
			color: rgba(250, 69, 67, 1);
		}
		.search-inp-box{
			width: calc(100% - 40px);
		}
	}
	.detail-box{
		margin: 10px 20px;
		box-sizing: border-box;
		// width: calc(100% - 40px);
		padding: 10px 14px;
		background-color: #ffffff;
		border-radius: 8px;
		position: relative;
		.detail-top{
			border-bottom: 1px solid rgba(245, 245, 245, 1);
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
		.img-box{
			position: relative;
			.point-tip{
				z-index: 1;
				padding: 2px 6px;
				border-radius: 8px 0 8px 0;
				background: #FBDBB0;		
				position: absolute;
				left: 0;
				top: 0;
			}
			.pft-box{
				position: absolute;
				top: -1px;
				left: -5px;
				font-family: PingFang SC;
				font-size: 8px;
				font-weight: 400;
				line-height: 11px;
				text-align: text;
				width: 32px;
				color: rgba(51, 51, 51, 1);
			}
			.pft-ticket{
				width: 32px;
				height: 19px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.pft-text{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 15px;
				z-index: 2;
			}
		}
		.goods-img{
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}
		.goods-dec{
			width: calc(100% - 80px);
			margin-left: 20px;
		}
		.goods-name{
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 1);
			width: calc(100% - 58px);
		}
		.goods-price{
			font-size: 12px;
			font-weight: 400;
			line-height: 22px;
			letter-spacing: 0px;
			color:rgba(51, 51, 51, 0.6);
		}
		.goods-msg{
			border-top: 1px solid rgba(245, 245, 245, 1);
			margin-top: 10px;
			padding-top: 10px;
		}
		.goods-no{
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 0.6);
			margin-bottom: 6px;
		}
		.goods-no-title{
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: 0px;
			width: 70px;
			color: rgba(51, 51, 51, 0.6);
		}
		.gary-color{
			color: rgba(51, 51, 51, 0.6);
		}
		.amt-box{
			margin: 16px 0;
			.order-amt,.total-amt{
				font-size: 12px;
				font-weight: 500;
				line-height: 20px;
				color: rgba(51, 51, 51, 1);
				.amt-num{
					color:rgba(250, 69, 67, 1);
				}
			}
			.goods-num{
				font-size: 21px;
			}
		}
	}
	.order-dec-btn{
		// width: 80px;
		font-size: 12px;
		line-height: 26px;
		height: 26px;
		padding: 0px 16px;
		border-radius: 8px;
		border: 1px;
		color: rgba(51, 51, 51, 1);
		border: 1px solid rgba(51, 51, 51, 1);
	}
</style>
